<template>
  <div class="content">
    <mid-dialog
      title="修改密码"
      @close="close"
      v-if="flag===true"
    >
      <div class="addapp"  >
        <table>
          <tr>
            <td><span class="c-error">*</span>原密码</td>
            <td>
              <input type="text" v-model="oldpwd" @focus="reset" class="searchInput" @blur="verifyOldPwd" placeholder="请输入原密码" v-bind:class="{ error: oldpwdMsg !==''}"  />
              <div class="msg c-error">{{oldpwdMsg}}</div>
            </td>
          </tr>
          <tr>
            <td><span class="c-error">*</span>新密码</td>
            <td>
              <input
                type="text"
                class="searchInput"
                placeholder="请输入新密码"
                v-model="newpwd"
                @focus="reset"
                @blur="verifyNewPwd"
                v-bind:class="{ error: newpwdMsg !==''}"
              />
              <div class="msg c-error">{{newpwdMsg}}</div>
            </td>
          </tr>
          <tr>
            <td><span class="c-error">*</span>确认密码</td>
            <td>

                <input
                  type="text"
                  class="searchInput"
                  placeholder="请再次输入密码"
                  v-model="newppwd"
                  @focus="reset"
                  @blur="verifyNewPPwd"
                v-bind:class="{ error: newppwdMsg !==''}"

                />
               <div class="msg c-error">{{newppwdMsg}}</div>
            </td>
          </tr>
        </table>

        <div class="btns flex-start">
          <div class="btn-white2" @click="cancel">取消</div>
          <div class="btn-blue2" @click="save">保存</div>
        </div>
      </div>
    </mid-dialog>
  </div>
</template>

<script>
export default {
  props: {
    flag: {
      require: Boolean,
      default: ''

    }

  },
  data () {
    return {
      midDialog: false,
      oldpwdMsg: '', // 旧密码错误提示
      newpwdMsg: '',
      newppwdMsg: '',
      oldpwd: '',
      newpwd: '',
      newppwd: ''

    }
  },
  methods: {
    close () {
      this.$emit('close')
      this.resetAll()
    },
    save () {
      // console.log(123)
      this.verifyOldPwd()
      this.verifyNewPwd()
      this.verifyNewPPwd()

      if (this.oldpwd && this.newpwd && this.newppwd && this.oldpwdMsg === '' && this.newppwdMsg === '' && this.newpwdMsg === '') {
        // console.log(this.oldpwd, this.newpwd, this.newppwd)
        this.$store.dispatch('user/updatePwdData', { newPwd: this.newpwd, oldPwd: this.oldpwd, surePwd: this.newppwd }).then(res => {
          // console.log(res)
          this.$emit('close')
          this.resetAll()
        }).catch(res => {
          // console.log(res)
          if (res.message.indexOf('原密码') !== -1) {
            this.oldpwdMsg = res.message
          } else {
            this.newppwdMsg = res.message
          }
        })
      }
      // this.$emit('close')
    },
    reset () {
      this.oldpwdMsg = ''
      this.newpwdMsg = ''
      this.newppwdMsg = ''
      // this.oldpwd = ''
      // this.newpwd = ''
      // this.newppwd = ''
    },
    resetAll () {
      this.oldpwdMsg = ''
      this.newpwdMsg = ''
      this.newppwdMsg = ''
      this.oldpwd = ''
      this.newpwd = ''
      this.newppwd = ''
    },
    verifyOldPwd () {
      // if (this.oldpwd === '') {
      //   this.oldpwdMsg = '请输入密码'
      // } else if (this.newpwd === '') {
      //   this.newpwdMsg = '请输入密码'
      // } else if (this.newppwd === '') {
      //   this.newppwdMsg = '请再次输入密码'
      // }
      const re = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{8,16}$/
      if (this.oldpwd === '') {
        this.oldpwdMsg = '请输入密码'
      } else if (re.test(this.oldpwd)) {
        this.oldpwdMsg = ''
      } else {
        this.oldpwdMsg = '密码格式错误'
      }
    },
    verifyNewPwd () {
      const re = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{8,16}$/

      if (this.newpwd === '') {
        this.newpwdMsg = '请输入密码'
      } else if (re.test(this.newpwd)) {
        this.newpwdMsg = ''
      } else {
        this.newpwdMsg = '密码格式错误'
      }
    },
    verifyNewPPwd () {
      const re = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{8,16}$/

      if (this.newppwd === '') {
        this.newppwdMsg = '请再次输入密码'
      } else if (re.test(this.newppwd)) {
        this.newppwdMsg = ''
      } else {
        this.newppwdMsg = '密码格式不正确'
      }
    },
    cancel () {
      this.$emit('close')
      this.resetAll()
    }

  }

}
</script>

<style lang="scss" scoped>
.addapp {
  text-align: center;
  table {
    position: absolute;
    z-index: 100;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    td {
      &:nth-child(1) {
        height: 0px;
        white-space: nowrap;
        text-align: right;
        line-height: 40px !important;
        vertical-align: top;
      }
      &:nth-child(2) {
        width: 300px;
        height: 0px;

        padding-left: 20px;
        text-align: left;
      }
    }
  }
  .msg {
    margin: 8px 0;
    height: 16px;
  }
  .btns {
    position: absolute;
    bottom: 20px;

    .btn-white2 {
      width: 100px;
      margin-left: 156px;
      margin-right: 20px;
    }
    .btn-blue2 {
      width: 100px;
    }
  }
}
</style>
